<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String ctx = request.getContextPath();
    request.setAttribute("ctx", ctx);
%>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" href="css/img.css">
    <script src="js/fileupload.js"></script>
</head>
<body>
    <form method="post" action="add.do">
       姓名： <input type="text" name="sname"><br>
        生日：<input type="text" name="birthday"><br>
        性别：<input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女">女<br>
       爱好： <input type="checkbox" name="hobby" value="抽烟">抽烟
        <input type="checkbox" name="hobby" value="喝酒">喝酒
        <input type="checkbox" name="hobby" value="烫头">烫头<br>
       头像： <div class="photoUpLoad" >
            <input type="file"   class="photo" name="photo" accept="image/*"><span class="cross">+</span>
            <img src="" alt="" class="photoEcho">
        </div>
        <br>
        籍贯：<select name="sheng.id">
                    <option>请选择</option>
                </select>
            <select name="shi.id">
                <option>请选择</option>
            </select>
            <select name="xian.id">
                <option>请选择</option>
            </select>
        <br>
        课程:<div id="courses">
    </div>

        <input type="button" value="添加" onclick="add()">
    </form>
</body>
<script>
    $.ajax({
        url:"cityList.do",
        type:"post",
        dataType:"json",
        data:{"pid":0},
        success:function (obj) {
            for (let x in obj) {
                $("[name='sheng.id']").append('<option value='+obj[x].id+'>'+obj[x].name+'</option>')
            }
        }
    })

    $("[name='sheng.id']").change(function (){
        var pid=$(this).val();
        $("[name='shi.id']").empty()
        $("[name='shi.id']").append("<option>请选择</option>")
        $("[name='xian.id']").empty()
        $("[name='xian.id']").append("<option>请选择</option>")

        $.ajax({
            url:"cityList.do",
            type:"post",
            dataType:"json",
            data:{"pid":pid},
            success:function (obj) {
                for (let x in obj) {
                    $("[name='shi.id']").append('<option value='+obj[x].id+'>'+obj[x].name+'</option>')
                }
            }
        })
    })

    $("[name='shi.id']").change(function (){
        var pid=$(this).val();
        $("[name='xian.id']").empty()
        $("[name='xian.id']").append("<option>请选择</option>")
        $.ajax({
            url:"cityList.do",
            type:"post",
            dataType:"json",
            data:{"pid":pid},
            success:function (obj) {
                for (let x in obj) {
                    $("[name='xian.id']").append('<option value='+obj[x].id+'>'+obj[x].name+'</option>')
                }
            }
        })
    })

    function add(){
        var formData = new FormData($("form")[0]);
        $.ajax({
            url:"add.do",
            type:"post",
            dataType:"json",
            data:formData,
            processData: false,
            contentType:false,
            success:function (obj) {
                if(obj>0){
                    alert("OK")
                    location="list.do";
                }
            }
        })
    }

    // 课程加载ajax
    $.ajax({
        url:"courseList.do",
        type:"post",
        dataType:"json",
        success:function (obj){
            for (let x in obj) {
                $("#courses").append(" <input type='checkbox' name='cids' value="+obj[x].cid+">"+obj[x].cname)
            }

        }
    })
</script>
</html>
